<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui">
    <div id="layout-topbar" class="ShadowGray">
        <div id="layout-topbar-indent">
            <h:link outcome="/dashboard.xhtml">
                <h:graphicImage id="logo" value="#{resource['spark-layout:images/LOGO.svg']}" styleClass="Fleft"/>
            </h:link>
            <a href="#" id="mobile-menu-button" class="BordRad3 white ShowOnMobile"><i class="fa fa-bars"/> #{msgs['topbar.menu']}</a>
            <a href="#" id="mobile-menu-button-gray" class="BordRad3 white ShowOnMobile"><i class="fa fa-caret-down"/> #{msgs['topbar.top_menu']}</a>

            <h:form>
                <ul id="layout-topbar-menu">
                    <li>
                        <a href="#" class="Animated05"><i class="fa fa-sign-out"/> #{msgs['topbar.logout']}</a>
                    </li>
                    <li class="fa fa-ellipsis-v menu-separator"/>
                    <li>
                        <a href="#" class="Animated05"><i class="fa fa-gear fa-spin"/> #{msgs['topbar.settings']}</a>
                    </li>
                    <li class="fa fa-ellipsis-v menu-separator"/>
                    <li>
                        <a class="Animated05 CursPointer"><i class="fa fa-flag-checkered"/> #{msgs['topbar.language']} <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"/></a>
                        <ul style="width:150px; margin-left:-30px;" class="Animated03 submenu">
                            <li><p:commandLink styleClass="Animated05" actionListener="#{i18n.setLanguage('zh_CN')}" immediate="true" ajax="false"><h:graphicImage value="#{resource['images/flag/cn.png']}"/> #{msgs['topbar.zh_CN']}</p:commandLink></li>
                            <li><p:commandLink styleClass="Animated05" actionListener="#{i18n.setLanguage('zh_TW')}" immediate="true" ajax="false"><h:graphicImage value="#{resource['images/flag/tw.png']}"/> #{msgs['topbar.zh_TW']}</p:commandLink></li>
                            <li><p:commandLink styleClass="Animated05" actionListener="#{i18n.setLanguage('en_US')}" immediate="true" ajax="false"><h:graphicImage value="#{resource['images/flag/us.png']}"/> #{msgs['topbar.en_US']}</p:commandLink></li>
                            <!--<li><a href="#" class="Animated05"><i class="fa fa-flag red"/> English</a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-flag red"/> German</a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-flag red"/> Portuguese</a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-flag red"/> French</a></li>-->
                        </ul>
                    </li>
                    <li class="fa fa-ellipsis-v menu-separator"/>
                    <li>
                        <a class="Animated05 CursPointer"><i class="fa fa-bell animated swing infinite red"/> #{msgs['topbar.messages']} <span class="notification-bubble BordRad3 animated rubberBand">24</span> <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"/></a>
                        <ul style="width:200px; margin-left:-45px;" class="Animated03 submenu">
                            <li><a href="#" class="Animated05"><i class="fa fa-envelope Fs18 blue"/> <span class="Fright Fs16 TexAlRight">Brian Connely<span class="Fs10 DispBlock">Sales Reports</span></span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-envelope Fs18"/> <span class="Fright Fs16 TexAlRight">Jack O'Neill<span class="Fs10 DispBlock">Last Meeting Notes</span></span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-envelope Fs18 blue"/> <span class="Fright Fs16 TexAlRight">Tony Parker<span class="Fs10 DispBlock">Web Site Visitors</span></span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-envelope Fs18 red animated infinite rubberBand"/> <span class="Fright Fs16 TexAlRight">Bob Ross<span class="Fs10 DispBlock">IK Reports</span></span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-envelope Fs18 orange"/> <span class="Fright Fs16 TexAlRight">Sarah White<span class="Fs10 DispBlock">Marketing News</span></span></a></li>
                        </ul>
                    </li>
                    <li class="fa fa-ellipsis-v menu-separator"/>
                    <li>
                        <a class="Animated05 CursPointer"><i class="fa fa-user"/>
                            #{" "}
                            <h:outputFormat value="#{msgs['topbar.welcome']}">
                                <f:param value="John DOE"/>
                            </h:outputFormat>
                            <i class="fa fa-chevron-down Fs14 Fright ShowOnMobile"/></a>
                        <ul style="width:175px; margin-left:-10px;" class="Animated03 submenu">
                            <li><a class="Animated05"><i class="fa fa-user Fs30 Fleft"/> <span class="Fright Fs20 TexAlRight">John DOE<span class="Fs10 DispBlock">#{msgs['topbar.last_login']} 18:50</span></span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-dashboard"/> #{msgs['topbar.my_profile']}</a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-magic"/> #{msgs['topbar.my_settings']}</a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-suitcase"/> #{msgs['topbar.tasks']} <span class="notification-bubble BordRad3 Fright">24</span></a></li>
                            <li><a href="#" class="Animated05"><i class="fa fa-quote-right"/> #{msgs['topbar.notifications']} <span class="notification-bubble BordRad3 Fright">18</span></a></li>
                        </ul>
                    </li>
                </ul>
            </h:form>
        </div>
    </div>
</ui:composition>
